<template>
  <div>
    <div class="liveGoodsAnalysis">
      <p class="title">商品列表</p>
      <ul class="goodsList">
        <li v-for="(item, i) in table_data02" :key="i + 'aa'">
          <div class="itemBox">
            <div class="logo_box" @click="goGoodsdetails(item.pro_id)">
              <img :src="item.logo" />
            </div>
            <div class="tit_box">
              <p @click="goGoodsdetails(item.pro_id)">{{ item.title }}</p>
              <p>上架时间：{{ timestamp(item.begin_time, "h:m:s") }}</p>
            </div>
          </div>
          <div class="bot_box">
            <div>
              <p>{{ format_num(item.live_prive)+(item.max_price?'-'+format_num(item.max_price):'')  }}</p>
              <p>直播价</p>
            </div>
            <div>
              <p>{{ format_num(item.sales_count) }}</p>
              <p>直播销量(件)</p>
            </div>
            <div>
              <p>{{ format_num(item.sales_volume) }}</p>
              <p>直播销售额(元)</p>
            </div>
          </div>
        </li>
      </ul>
      <div
        v-loading="loading"
        class="loading"
        element-loading-text="拼命加载中..."
        element-loading-spinner="el-icon-loading"
      ></div>
      <button
        class="more"
        @click="more"
        v-if="table_data02.length != table_data01.length && !loading"
      >
        查看更多
      </button>
      <!-- <p
      class="noMore"
      v-if="table_data01.length&&table_data02.length==table_data01.length&&!loading"
    >已经到底了哟，电脑登录dy.zsjx114.com查看更多详细数据~</p> -->
      <div class="zw" v-if="!table_data01.length && !loading">
        <img src="../../../assets/three/noData.png" alt />
        <p>暂无数据</p>
      </div>
    </div>
    <!-- 分割线 -->
    <p class="Splitline"></p>
  </div>
</template>

<script>
export default {
  props: ["status"],
  data() {
    return {
      loading: false,
      table_data01: [],
      table_data02: [],
      page: 1,
      size: 10,
      tiemr: null
    };
  },
  components: {},
  computed: {},
  created() {},
  destroyed() {
    this.clearTime();
  },
  mounted() {
    this.get_data_table();

    this.tiemr = setInterval(() => {
      // console.log(this.status);
      this.get_data_table();
    }, 120000);
  },
  watch: {},
  methods: {
    goGoodsdetails(id) {
      this.$router.push({ path: "/goodsDetailsMain", query: { id } });
    },
    clearTime() {
      clearInterval(this.tiemr);
      this.tiemr = null;
    },
    more() {
      this.page++;
      this.table_data02 = this.table_data01.slice(0, this.size * this.page);
    },
    // 商品列表
    get_data_table() {
      if (this.status == 2) {
        clearInterval(this.tiemr);
      }
      this.loading = true;
      let that = this;
      this.$axios({
        method: "get",
        url: "/api/live/GetLivePro1",
        params: {
          room_id: that.$route.query.id,
          // room_id: '6992048590566869800',
          // c: this.orderType,
          // s: this.sort
          c: 1,
          s: 3
        }
      })
        .then(response => {
          this.loading = false;
          if (response.data.code == 0) {
            this.$emit('goodsDatas',{
              livesales:response.data.data.livesales,
              livevolume:response.data.data.livevolume
            });
            this.table_data01 = response.data.data.data;
            this.table_data02 = this.table_data01.slice(0, 10);
            // this.table_data011 = response.data.data.livesales;
            // this.table_data012 = response.data.data.livevolume;
          }
          this.loading1 = false;
        })
        .catch(error => {
          // this.loading = false;
          console.log(error);
        });
    }
  }
};
</script>

<style lang="less" scoped>
.Splitline {
  width: 100%;
  height: 0.36rem;
  background: #c3cadf;
  opacity: 0.1;
  margin-bottom: 0.2rem;
}
.liveGoodsAnalysis {
  padding: 0.666667rem 0.4rem 0;
  text-align: center;
  min-height: 7rem;
  .title {
    text-align: left;
    position: relative;
    font-size: 0.4rem;
    font-weight: 600;
    color: #ffffff;
    text-indent: 0.266667rem;
    vertical-align: top;
    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-42%);
      vertical-align: middle;
      width: 0.08rem;
      height: 0.373333rem;
      background-color: #fd7f2c;
      border-radius: 0.04rem;
    }
  }
  .goodsList {
    // width: 9.2rem;
    // margin: auto;
    text-align: left;
    > li {
      padding-top: 0.4rem;
      border-bottom: 1px solid rgba(195, 202, 223, 0.2);
      padding-bottom: 0.4rem;
      .itemBox {
        display: flex;
        width: 100%;
        // height: 1.333333rem;
      }
      .bot_box {
        padding-top: 0.4rem;
        display: flex;
        justify-content: space-around;
        > div {
          text-align: center;
          > p {
            &:nth-child(1) {
              font-family: DINPro-Medium;
              font-size: 0.4rem;
              color: #c3cadf;
            }
            &:nth-child(2) {
              font-size: 0.32rem;

              color: #c3cadf;
              opacity: 0.5;
            }
          }
        }
      }
      .logo_box {
        width: 1.333333rem;
        flex: 0 0 1.333333rem;
        height: 1.333333rem;
        border-radius: 0.266667rem;
        margin-right: 0.253333rem;
        overflow: hidden;
        > img {
          width: 100%;
          height: 100%;
        }
      }
      .tit_box {
        padding-top: 0.133333rem;
        > p {
          &:nth-child(1) {
            width: 7.733333rem;
            font-size: 0.4rem;
            color: #c3cadf;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-bottom: 0.133333rem;
          }
          &:nth-child(2) {
            font-size: 0.32rem;

            color: #c3cadf;
            opacity: 0.5;
          }
        }
      }
    }
  }
  .more {
    width: 2.133333rem;
    height: 0.8rem;
    border-radius: 0.133333rem;
    border: solid 1px #fd7f2c;
    font-size: 0.346667rem;
    color: #fd7f2c;
    background: #191f33;
    margin-top: 0.666667rem;
    margin-left: -0.4rem;
    margin-bottom: 0.666667rem;
  }
  .noMore {
    font-size: 0.32rem;
    color: #c3cadf;
    opacity: 0.5;
    margin-left: -0.4rem;
    padding-top: 0.666667rem;
    padding-bottom: 0.666667rem;
  }
  .zw {
    width: 100%;
    margin-top: 1rem;
    margin-left: -0.4rem;
    position: absolute;
    height: 3.986667rem;
    text-align: center;
    img {
      width: 3.96rem;
      height: 2.826667rem;
    }
    p {
      font-size: 0.346667rem;
      color: #c3cadf;
      opacity: 0.5;
    }
  }
}
</style>
